<template>
	<view>
		<u-popup v-model="popShow" height="650" mode="bottom" length="50%" :closeable="true" :duration="200" :mask-close-able="false" @close="close">
			<view class="pop-title">请选择支付方式</view>
			<view class="pop-price">
				金额 <text>¥{{ money.price }}</text>元
			</view>
			<view class="pay-way">
				<view class="item" v-for="(item, index) in getPayWay" :key="index" @click="selectPay(item)">
					<view :class="['iconfont', item.cla,{yu: item.id===3}]"></view>
					<view class="name">{{ item.val }}</view>
					<view class="iconfont iconduihao" v-show="item.sel"></view>
				</view>
			</view>
			<view class="btn-con-pay" @click.stop="confirmPay">
				<my-button>确认支付</my-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myButton from '@/components/button/button.vue'
	export default {
		data() {
			return {
				payWay: [
					{
						id: 1,
						val: '微信',
						cla: 'iconweixinzhifu',
						sel: true,
						paytypes: 1
					},
					{
						id: 2,
						val: '支付宝',
						cla: 'iconzhifubao',
						sel: false,
						paytypes: 0
					},
					{
						id: 3,
						val: '余额',
						cla: 'iconyue',
						sel: false,
						paytypes: 0
					}
				],
				paymentWay: 3, // 默认微信
			}
		},
		props: {
			popShow: {
				type: Boolean,
				default: false
			},
			money: {
				type: Object,
				required: true
			}
		},
		computed: {
			getPayWay() {
				let arr = this.payWay.filter(item => item.paytypes != 0)
				return arr
			}
		},
		watch: {
			money: {
				handler(val, oldVal) {
					// if (this.money.recharge === 1) {
					// 	this.payWay[1].paytypes = 0
					// 	this.payWay[2].paytypes = 0
					// 	console.log(this.payWay)
					// 	return
					// }
					if (this.money.paytypes.wx_pay == 0) {
						this.payWay[0].paytypes = 0
					} else {
						this.payWay[0].paytypes = 1
					}
					if (this.money.paytypes.ali_pay == 0) {
						this.payWay[1].paytypes = 0
					} else {
						this.payWay[1].paytypes = 1
					}
					if (this.money.paytypes.bl_pay == 0) {
						this.payWay[2].paytypes = 0
					} else {
						this.payWay[2].paytypes = 1
					}
					console.log(this.payWay)
				},
				deep: true
			}
		},
		mounted() {
			console.log(this.money)
		},
		methods: {
			selectPay(item) {
				console.log(item)
				this.payWay.forEach(way => way.sel = false)
				item.sel = true
				if (item.id === 1) {
					this.paymentWay = 3
				} else if (item.id === 2) {
					this.paymentWay = 2
				} else if (item.id === 3) {
					this.paymentWay = 1
				} 
			},
			confirmPay() {
				console.log(this.paymentWay)
				this.$emit('confirmPay', {paymentWay: this.paymentWay,popShow: false})
			},
			close() {
				this.$emit('closePopup', false)
			}
		},
		components: {
			myButton
		}
	}
</script>

<style lang="scss" scoped>
	.pop-title {
		font-size: 36rpx;
		color: #1a1a1a;
		text-align: center;
		padding: 50rpx 0;
	}
	.pop-price {
		text-align: center;
		font-size: 28rpx;
		color: #1a1a1a;
		text {
			color: #eb6657;
			padding-left: 6rpx;
		}
	}
	.pay-way {
		padding: 0 30rpx;
		margin-top: 20rpx;
		.item {
			display: flex;
			height: 99rpx;
			align-items: center;
			border-bottom: 1rpx solid #e6e6e6;
			.iconduihao {
				margin-left: auto;
			}
			.name {
				font-size: 30rpx;
				color: #1a1a1a;
				padding-left: 18rpx;
			}
			.iconweixinzhifu {
				font-size: 40rpx;
				color: #09bb07;
			}
			.iconzhifubao {
				font-size: 40rpx;
				color: #1296db;
			}
			.iconduihao {
				font-size: 34rpx;
				color: #0d2647;
				margin-right: 28rpx;
			}
			&:last-child {
				// border-bottom: none;
			}
			
		}
	}
	.btn-con-pay {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.yu {
		color: #cfa972;
		font-size: 40rpx;
	}
</style>
